// 按区域显示数据
<template>
  <div class="NBMeterMAnagement">
    <!-- header -->
    <!-- <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-printer">&nbsp;&nbsp;</i>NB水表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <!-- content -->
    <div v-if="flag === true">
      <v-community></v-community>
    </div>
    <div v-if="getCommMeterListMsg.dialog">
      <v-details></v-details>
      <v-userDialog></v-userDialog>
      <v-deviceDialog></v-deviceDialog>
    </div>
  </div>
</template>

<script>
import vCommunity from "./community.vue";
import vDetails from "./details.vue";
import vUserDialog from "./userDialog.vue";
import vDeviceDialog from "./deviceDialog.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    vCommunity,
    vDetails,
    vUserDialog,
    vDeviceDialog
  },
  computed: {
    // 用 mapGetters 来获取 meterReadingManagement.js里面的 getters
    ...mapGetters("meterReadingManagement", {
      flag: "showFlag"
    }),
    ...mapGetters("meterReadingManagement", {
      getCommMeterListMsg: "showCommMeterList"
    })
  },
  destroyed() {
    this.$store.dispatch("meterReadingManagement/commitFlag", true);
  }
};
</script>

<style scoped>
</style>
